import React, { PureComponent } from 'react';
import WrapperDrop from '../DragAndDrop/WrapperDrop.js';
import WrapperDrag from '../DragAndDrop/WrapperDrag.js';

class CascadeDrop extends PureComponent {
	render() {
		const { dataSet, isDragging, activeField, removeField ,draggabled} = this.props;
		const {
			attrInfo: { titleValue , tipValue , verifyValue },
			active,
			cellIndex
    } = dataSet;
    
		let status = '';
		if (active) {
			status = status + ' active';
		}
		if (isDragging) {
			status = status + ' draging';
		}
		return (
			<div className={`wf-component wf-component-textfield ${status}`} draggable={draggabled}>
				<div
					className="wf-remove icon icon-close"
					onMouseDown={event => {
						event.stopPropagation();
						removeField(dataSet,cellIndex);
					}}
				/>
				<div
					className="wf-overlay wf-drag"
					onMouseDown={event => {
						event.stopPropagation()
						activeField(dataSet,active,cellIndex);
					  }}
				/>
				<div className="wf-view">
					<div className="wf-field">
						<label className="wf-field-label">{titleValue}</label>
						<span className="wf-field-placeholder">{tipValue + (verifyValue ? '（必填）' : '')}</span>
					</div>
				</div>
			</div>
		);
	}
}

export default WrapperDrop(WrapperDrag(CascadeDrop));
